{% extends 'partials/base.html' %}
{% block title %}主 页{% endblock %}
{% block content %}
<!--平台用户，已注册，管理员-->
{% if request.user.is_authenticated and user.is_staff and user.is_superuser %}
{% include 'partials/topside.html' %}
<div class="row ">
    <div class="col-md-6 my-4">
        <div class="bg-white">
            <div class="card-body">
                <canvas id="myChart1" width="400" height="300"></canvas>
                <script>
                    var ctx = document.getElementById('myChart1').getContext('2d');
                    var myChart1 = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: [{% for product in products %}'{{product.name}}',{% endfor %}],
                    datasets: [{
                        label: '商品数量',
                        data: [{% for product in products %}'{{product.quantity}}',{% endfor %}],
                        backgroundColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(100, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(205, 59, 164, 1)',
                            'rgba(107, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(55, 159, 64, 1)',
                            'rgba(155, 19, 64, 1)',
                        ],
                            borderColor: [
                               'rgba(255, 99, 132, 1)',
                            'rgba(100, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(205, 59, 164, 1)',
                            'rgba(107, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(55, 159, 64, 1)',

                            ],
                                borderWidth: 1
                    }]
                        },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                    });


                </script>

            </div>
        </div>
    </div>
    <div class="col-md-6 my-4">
        <div class="bg-white">
            <div class="card-body">
                <canvas id="myChart" width="400" height="300"></canvas>
<script>
                    var ctx = document.getElementById('myChart').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'pie',
                        data: {
                            labels: [{% for order in orders %}'{{order.product}}',{% endfor %}],
                    datasets: [{
                        label: 'Orders',
                        data: [{% for order in orders %}'{{order.order_quantity}}',{% endfor %}],
                        backgroundColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                                borderWidth: 1
                    }]
                        },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                    });
                </script>
            </div>
        </div>
    </div>
</div>
{% else %}
{% include 'dashboard/staff_index.html' %}
<!--需求方要展示的东西，商品列表，下订单，订单信息。-->
{%  endif %}
{% endblock %}